import React, { useState } from 'react'
import {  Button, NavBar,Tabs } from 'antd-mobile'

function Index() {
  const rateData = [{
     id:1,
     url:'https://tse3-mm.cn.bing.net/th/id/OIP-C.4sk-CHBgmYfinagp1zu7QAHaEo?w=290&h=181&c=7&r=0&o=5&dpr=1.8&pid=1.7',
     rate:'好评',
     content:'好吃好吃'
  },
  {
     id:2,
     url:'https://tse3-mm.cn.bing.net/th/id/OIP-C.nkWmM-lReaN8kH-ieXmZrQHaEo?w=290&h=181&c=7&r=0&o=5&dpr=1.8&pid=1.7',
     rate:'差评',
     content:'12441不好吃'
  },
  {
     id:3,
     url:'https://tse1-mm.cn.bing.net/th/id/OIP-C.U_uj1lJJzLqyAf1WljIAVAHaE2?w=295&h=194&c=7&r=0&o=5&dpr=1.8&pid=1.7',
     rate:'好评',
     content:'好吃好124吃124'
  },
  {
     id:4,
     url:'https://tse1-mm.cn.bing.net/th/id/OIP-C.StrDRqennoZNbzSPZapKZwAAAA?w=325&h=181&c=7&r=0&o=5&dpr=1.8&pid=1.7',
     rate:'最新',
     content:'还行'
  },
  {
     id:5,
     url:'https://tse4-mm.cn.bing.net/th/id/OIP-C.00HEmqYJSK44tQgKfX9dWAHaEo?w=310&h=193&c=7&r=0&o=5&dpr=1.8&pid=1.7',
     rate:'最新',
     content:'好吃好吃11'
  }
]
const [filter,setFilter]=useState('')
const [flag,setFlag]=useState(false)
const zuixin=(value)=>{
  console.log(value)
  
 setFlag(true)
   setFilter(value)
}
const filterData=rateData.filter(item=>item.rate===filter)
 console.log(filterData)

  return (
    <div>
       <NavBar>餐厅详情</NavBar>
          <Tabs>
          <Tabs.Tab title='概览' key='fruits'>
          概览
          </Tabs.Tab>
          <Tabs.Tab title='推荐菜' key='vegetables'>
           推荐菜
          </Tabs.Tab>
          <Tabs.Tab title='评价' key='animals'>
           
             <Button onClick={()=>zuixin('最新')}>最新</Button>
             <Button onClick={()=>zuixin('好评')}>好评</Button>
             <Button onClick={()=>zuixin('差评')}>差评</Button>
              {
                flag ? 
                 filterData.map(item=>{
                  return <div key={item.id}>
                       <img src={item.url} alt="" />
                       <p>{item.rate}</p>
                        <p>{item.content}</p>
                  </div>
                 }): rateData.map(item=>{
                  return <div key={item.id}>
                       <img src={item.url} alt="" />
                       <p>{item.rate}</p>
                        <p>{item.content}</p>
                  </div>
                 })
              }
          </Tabs.Tab>
            <Tabs.Tab title='更多' key='more'>
           更多
          </Tabs.Tab>
        </Tabs>
    </div>
  )
}

export default Index
